<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRM API 测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .test-section {
      margin-bottom: 30px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .test-section h2 {
      margin-top: 0;
      color: #333;
    }
    button {
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
      background: #409eff;
      color: white;
      border: none;
      border-radius: 3px;
    }
    button:hover {
      background: #66b1ff;
    }
    .result {
      margin-top: 15px;
      padding: 10px;
      background: #f5f7fa;
      border-radius: 3px;
      white-space: pre-wrap;
      max-height: 400px;
      overflow-y: auto;
    }
    .success {
      color: #67c23a;
    }
    .error {
      color: #f56c6c;
    }
  </style>
</head>
<body>
  <h1>营销CRM模块 API测试</h1>

  <!-- 客户管理API测试 -->
  <div class="test-section">
    <h2>1. 客户管理 API</h2>
    <button onclick="testCustomerList()">测试客户列表</button>
    <button onclick="testCustomerStatistics()">测试客户统计</button>
    <button onclick="testCustomerOptions()">测试客户选项</button>
    <div id="customer-result" class="result"></div>
  </div>

  <!-- 销售机会API测试 -->
  <div class="test-section">
    <h2>2. 销售机会 API</h2>
    <button onclick="testOpportunityList()">测试销售机会列表</button>
    <button onclick="testOpportunityOptions()">测试销售机会选项</button>
    <div id="opportunity-result" class="result"></div>
  </div>

  <!-- 跟进记录API测试 -->
  <div class="test-section">
    <h2>3. 跟进记录 API</h2>
    <button onclick="testFollowupList()">测试跟进记录列表</button>
    <button onclick="testFollowupOptions()">测试跟进记录选项</button>
    <div id="followup-result" class="result"></div>
  </div>

  <script>
    const API_BASE = 'http://localhost:8000';

    // 通用API请求函数
    async function apiRequest(url, options = {}) {
      try {
        const response = await fetch(url, {
          headers: {
            'Content-Type': 'application/json',
            ...options.headers
          },
          ...options
        });

        const data = await response.json();

        if (!response.ok) {
          throw new Error(data.message || `HTTP ${response.status}`);
        }

        return { success: true, data };
      } catch (error) {
        return { success: false, error: error.message };
      }
    }

    // 格式化输出
    function displayResult(elementId, result) {
      const element = document.getElementById(elementId);
      if (result.success) {
        element.innerHTML = `<span class="success">✓ 成功</span>\n\n${JSON.stringify(result.data, null, 2)}`;
      } else {
        element.innerHTML = `<span class="error">✗ 失败: ${result.error}</span>`;
      }
    }

    // ================== 客户API测试 ==================
    async function testCustomerList() {
      const result = await apiRequest(`${API_BASE}/api/crm/customer/list?page=1&limit=10`);
      displayResult('customer-result', result);
    }

    async function testCustomerStatistics() {
      const result = await apiRequest(`${API_BASE}/api/crm/customer/statistics`);
      displayResult('customer-result', result);
    }

    async function testCustomerOptions() {
      const result = await apiRequest(`${API_BASE}/api/crm/customer/options`);
      displayResult('customer-result', result);
    }

    // ================== 销售机会API测试 ==================
    async function testOpportunityList() {
      const result = await apiRequest(`${API_BASE}/api/crm/opportunity/list?page=1&limit=10`);
      displayResult('opportunity-result', result);
    }

    async function testOpportunityOptions() {
      const result = await apiRequest(`${API_BASE}/api/crm/opportunity/categoryOptions`);
      displayResult('opportunity-result', result);
    }

    // ================== 跟进记录API测试 ==================
    async function testFollowupList() {
      const result = await apiRequest(`${API_BASE}/api/crm/followup/list?page=1&limit=10`);
      displayResult('followup-result', result);
    }

    async function testFollowupOptions() {
      const result = await apiRequest(`${API_BASE}/api/crm/followup/options`);
      displayResult('followup-result', result);
    }
  </script>
</body>
</html>
